// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core';
import { App } from 'vue';

export const lazyPlugin = {
  install(app: App<Element>) {
    //懒加载指令逻辑
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            //   图片进入视口区域
            el.src = binding.value;
            //只要加载出来就停止监听，防止内存浪费
            stop();
          }
        });
      }
    });
  }
};

/* 
1.在Vue应用中注册了一个全局的自定义指令 img-lazy，这个指令可以在HTML模板中使用，通常是在 img 元素上。
2.当 img 元素被挂载到DOM上（即 mounted 阶段），指令的 mounted 钩子函数会被触发。
3.在 mounted 钩子函数中，你使用了 useIntersectionObserver 来监听元素是否进入了视口（可见区域）。
4.当元素进入视口时，useIntersectionObserver 的回调函数将被执行。回调函数接收一个参数，其中包含了一个布尔值 isIntersecting，用于表示元素是否进入视口。
5.如果 isIntersecting 为 true，表示图片已经进入了视口区域，于是指令会将 img 元素的 src 属性设置为 binding.value，也就是绑定指令时传递的图片URL。
6.最后，为了防止重复加载，你使用了 stop 方法停止了对该元素的进入视口事件的监听。这样，一旦图片加载完成后，就不会再重复加载。
*/
